<template>
	<view style="height: 70px;" class="w-full">
		<view class="bottomBtn " @click="click" style="padding-bottom: 10px;">
			<view class="confirm flex justify-around round-8 ">
				<view class="flex items-center btn" style="width: 100%;" v-if="txts != ''">
					<view class="bg-white" @click.stop="leftBtn">
						{{txt}}
					</view>
					<view class="" @click.stop="rightBtn">
						{{txts}}
					</view>
				</view>
				<view class="flex items-center" v-else>
					<image :src="icon" v-if="icon" style="width:16px;height: 16px; margin-right: 10px;" mode=""></image>
					{{txt}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name: "bottomBtn",
		data() {
			return {

			};
		},
		props: {
			txt: {
				default: '',
				type: String
			},
			txts: {
				default: '',
				type: String
			},
			icon: {
				default: '',
				type: String
			}
		},
		methods:{
			click(){
				this.$emit('click')
			},
			leftBtn(){
				this.$emit('leftClick')
			},
			rightBtn(){
				this.$emit('rightClick')
			}
		}
	}
</script>

<style lang="scss">
	.bottomBtn {
		width: 100%;
		height: 70px;
		background: #FFFFFF;
		box-shadow: 0px -10px 20px 0px rgba(153, 153, 153, 0.16);
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		z-index: 9999;
		padding: 0 16px;
		.confirm {
			width: 100%;
			height: 40px;
			background: linear-gradient( 180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 4px;
			text-align: center;
			line-height: 1;
			color: #fff;
			font-weight: bold;
			font-size: 14px;
			.bg-white{
				color: #274CFF;
				border: 0.5px solid #274CFF;
			}
			.btn{
				view{
					width: 50%;
					text-align: center;
					height: 100%;
					line-height: 40px;
				}
			}
			.at{
				margin: 0 auto;
			}
		}

		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
